<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="src/message.js"></script>
    <script src="js/tm.js" data-config="js/config.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div id="app" class="app">

        <div class="view">
            <div class="title">
                <div class="back" @click="back()" v-if="router != 'accountLogin'">
                    <div class="code icon"></div>
                </div>
                <span>{{ title }}</span>
            </div>
            <!-- 账号密码登录 -->
            <transition name="main" mode="in-out">
                <div class="content view" v-show="router == 'accountLogin'">
                    <input type="text" placeholder="账号" v-model="username">
                    <input type="password" placeholder="密码" v-model="password">
                    <div class="tips">
                        <span @click="enter('tokenLogin')">切换私人令牌登录</span>
                    </div>
                    <div class="button" @click="status ? enter('setting') : login()">
                        {{ logining ? "登录中..." : status ? "前往设置" : "登录" }}</div>
                </div>
            </transition>
            <!-- 用户注册 -->
            <transition name="main" mode="in-out">
                <div v-show="router == 'regist'" class="view">
                    <div class="regist">
                        <input type="text" placeholder="用户名" v-model="username">
                        <input type="password" placeholder="密码" v-model="password">
                        <input type="password" placeholder="重复密码" v-model="passwordRepeat">
                        <div class="button" @click="regist()">注册</div>
                    </div>
                </div>
            </transition>

            <!-- 支付界面 -->
            <transition name="main" mode="in-out">
                <div v-show="router == 'pay'" class="view">
                    <div class="pay" id="pay">
                        <div>
                            <p>该功能为付费功能，请扫描下方二维码付款3元后，将<strong>付款截图</strong>和<strong>下方密令</strong>以邮件的方式发送至
                                <a href="mailto:fangjin.1227@qq.com">fangjin.1227@qq.com</a>，
                                我将在收到邮件后尽快为您开通，个人工作原因可能没有及时响应，还请见谅，感谢您的支持！</p>
                            <p>
                                密令: <span
                                    style="color:red;font-weight:600;background:yellow;">{{ username + "[lyx]" + encrypted }}</span>
                            </p>
                            <img src="img/weixin.png" alt="微信收款码">
                        </div>
                    </div>
                </div>
            </transition>

            <!-- access_token登录 -->
            <transition name="main" mode="in-out">
                <div v-show="router == 'tokenLogin'" class="view">
                    <div class="content">
                        <input type="text" placeholder="id" v-model="id">
                        <input type="password" placeholder="access_token" v-model="access_token">
                        <div class="tips">id未填写时默认自动创建</div>
                        <div class="help" @click="help">使用帮助</div>
                        <div class="button" @click="status ? enter('setting') : createSync()">
                            {{ logining ? "登录中..." : status ? "前往设置" : "登录" }}</div>
                    </div>
                </div>
            </transition>

            <!-- 设置 -->
            <transition name="main" mode="in-out">
                <div v-show="router == 'setting'" class="view">
                    <div id="setting">
                        <div>
                            <div class="item click" @click="enter('regist')" v-if="!isRegist">
                                <div class="text">
                                    <span>注册用户</span>
                                    <i>注册可通过账号密码快速登录，无需记忆复杂的id和access_token</i>
                                </div>
                                <div class="into" style="top: 35px;">
                                    <div class="arrow-right icon"></div>
                                </div>
                            </div>
                            <div class="item click" @click="enter('noticeList')">
                                <div class="text">
                                    <span>系统通知</span>
                                    <i>当前有{{unreadNotic}}条未读通知</i>
                                </div>
                                <div class="into" style="top: 35px;">
                                    <div class="arrow-right icon"></div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="text">
                                    <span>{{ id }}</span>
                                    <i>代码片段id</i>
                                </div>
                            </div>
                            <div class="item">
                                <div class="text">
                                    <span>{{ access_token }}</span>
                                    <i>私人令牌access_token</i>
                                </div>
                            </div>
                            <div class="item">
                                <div class="text">
                                    <span>更新时间{{ format(new Date(updateTime)) }}</span>
                                    <i>更新来源: {{ from }}</i>
                                </div>
                            </div>
                            <div class="item click" @click="upload">
                                <div class="text">
                                    <span>上传本地书签</span>
                                </div>
                            </div>
                            <div class="item click" @click="download">
                                <div class="text">
                                    <span>同步云端书签</span>
                                </div>
                            </div>
                            <div class="item">
                                <div class="text">
                                    <span>自动同步</span>
                                    <i>开启后会在每次启动时自动同步云端数据，本地检测到变动时也会自动上传</i>
                                </div>
                                <div class="switch">
                                    <div name="switchBak" @click="setting('autoSync')"
                                        :style="{ background: autoSyncStyle.background, top: '35px' }">
                                        <div name="switch" id="autoSync" :style="{ left: autoSyncStyle.left }"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="text">
                                    <span>自动上传</span>
                                    <i>开启后本地检测到变动时会自动上传</i>
                                </div>
                                <div class="switch">
                                    <div name="switchBak" @click="setting('autoUpload')"
                                        :style="{ background: autoUploadStyle.background, top: '20px' }">
                                        <div name="switch" :style="{ left: autoUploadStyle.left }"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="text">
                                    <span>自动下载</span>
                                    <i>开启后会在每隔{{ interval }}秒同步一次云端数据</i>
                                </div>
                                <div class="switch">
                                    <div name="switchBak" @click="setting('autoDownload')"
                                        :style="{ background: autoDownloadStyle.background, top: '20px' }">
                                        <div name="switch" :style="{ left: autoDownloadStyle.left }"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="item click" @click="enter('setTimer')">
                                <div class="text">
                                    <span>设置自动同步时间间隔</span>
                                    <i>当前为{{ interval }}s</i>
                                </div>
                                <div class="into" style="top: 25px;">
                                    <div class="arrow-right icon"></div>
                                </div>
                            </div>
                            <div class="item click" @click="revert">
                                <div class="text">
                                    <span>恢复登录前书签</span>
                                    <i>恢复的同时会退出当前登录，不再同步</i>
                                </div>
                            </div>
                            <div class="item click" @click="clear">
                                <div class="text">
                                    <span>清除缓存</span>
                                    <i>当发现使用异常时，可通过清除缓存进行初始化恢复</i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>

            <!-- 设置自动同步时间间隔 -->
            <transition name="main" mode="in-out">
                <div v-show="router == 'setTimer'" class="view">
                    <div class="content">
                        <input type="text" placeholder="单位为秒" v-model.number="interval">
                        <div class="button" @click="submitTimer" style="margin-top: 20px;">确定</div>
                    </div>
                </div>
            </transition>

            <!-- 未读通知列表 -->
            <transition name="main" mode="in-out">
                <div v-show="router == 'noticeList'" class="view">
                    <div id="noticeList">
                        <div>
                            <div class="item click" v-for="item in noticeList" @click="readNotice(item)">
                                <div class="text noticeList">
                                    <span>{{ item.title || "系统通知" }}{{!noticeRead[item.id] ? "(未读)" : ""}}</span>
                                    <i>{{ item.createTime }}</i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>

            <!-- 通知详情 -->
            <transition name="main" mode="in-out">
                <div v-show="router == 'notice'" class="view notice" id="notice">
                    <div class="noticeInfo">
                        <div v-html="converter.makeHtml(targetNotice.content)"></div>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</body>

</html>
